1. 概念（是什么）

Tailwind CSS

Tailwind 是一种 原子化 CSS 框架（Utility-First）。它不需要你写传统 CSS，而是通过 class="" 里堆叠工具类来完成布局和样式，例如：

<div class="p-4 bg-gray-100 text-red-500 rounded-lg">按钮</div>

属于 功能类 CSS（像积木一样拼）。

SCSS

SCSS 是 CSS 的 预处理器，增强了变量、嵌套、函数、mixin、模块化等能力，本质仍是 CSS，但写法更高级：

$primary: #42b883;

.button {
  padding: 10px;
  background: $primary;
}

Less

Less 同样是 CSS 预处理器，和 SCSS 类似，但语法更轻量，变量以 @ 开头：

@primary: #42b883;

.button {
  padding: 10px;
  background: @primary;
}

2. 原理（为什么）

Tailwind 的原理

• 编译时扫描你的模板（Vue/React/HTML），提取所有 class 名

• 只生成用到的 CSS

• 减少最终体积

• 原子类保证复用率极高

• 不需要命名 CSS 类（不用再考虑 .btn-primary 这种命名）

本质：把 CSS 规则拆成无数片，用 class 来拼搭 UI。

SCSS / Less 的原理

• 开发阶段把 .scss 或 .less 编译为 .css

• 其语法（变量、嵌套、函数）都会被展开成普通 CSS

• 利于组织复杂项目的样式结构

本质：让 CSS 更强、更好写、更结构化。

3. 对比（差异点总结）

一句话总结：

Tailwind 适合“写 UI 像写积木”，
SCSS / Less 适合“需要结构化 CSS 的传统方式”。

4. 实践（怎么用）

4.1 Tailwind 场景示例（Nuxt / Vue 常用）

适合：快速开发、后台系统、统一设计风格、组件 UI 重复率高的场景。

<template>
  <button class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
    提交
  </button>
</template>

解释：

• px-3 横向 padding

• bg-blue-500 背景色

• rounded 圆角

• hover:bg-blue-600 悬停效果

• 无需写 CSS 文件

后台管理系统特别适合 Tailwind，因为 UI 密集且组件重复使用多。

4.2 SCSS 场景示例（模块化大项目常见）

适合：风格复杂、设计体系大、需要主题化、需要混入功能。

// variables.scss
$danger: #ff4d4f;

// button.scss
@import './variables';

.button {
  padding: 10px 16px;
  background-color: $danger;

  &:hover {
    background-color: darken($danger, 10%);
  }
}

解释：

• 更适合构建“复杂的样式体系”

• 功能更完整（mixin、function、extend 等）

4.3 Less 场景示例（轻量/老项目）

适合：老项目、Vue2 项目、Ant Design 主题修改（官方用 Less）

@primary: #1890ff;

.button {
  padding: 10px 16px;
  background-color: @primary;

  &:hover {
    background-color: darken(@primary, 10%);
  }
}

解释：

• 更轻量、语法简洁

• 但生态没有 SCSS 强

5. 拓展（更深层使用策略）

5.1 Tailwind + SCSS 混用最佳实践

在真实业务中，这种组合很常见。

• 布局与整体结构用 Tailwind

• 复杂组件内部用 SCSS

例如 Tiptap 或富文本、复杂动画等：

<style lang="scss" scoped>
.article-content {
  h1 {
    font-size: 28px;
    margin-bottom: 12px;
  }
  p {
    line-height: 1.8;
  }
}
</style>

5.2 Tailwind 复杂组件拆分策略

当 class 太长时，可以这样：

<div class="card-base">
  内容
</div>

/* tailwind.css */
@layer components {
  .card-base {
    @apply bg-white p-4 rounded shadow;
  }
}

解释：

• 用 @apply 把原子类收拢成组件样式

• 又保留 Tailwind 优点

5.3 样式系统的选择建议

• 新项目（强烈推荐）：Tailwind

• 有设计体系 / UI 复杂 / 图层深：SCSS

• 历史包袱项目 / AntD 主题修改：Less

• SSR、前端工程化体系：Tailwind 更轻量，构建更快

6. 潜在问题（你应该注意）

Tailwind 的问题

• class 非常长

• HTML 看起来杂乱

• 自定义动画、组件较麻烦

• 对初学者不友好

SCSS 的问题

• 依赖工程化工具链

• 文件体积较大

• 写多了容易层级深、冗余代码积累

Less 的问题

• 生态逐渐弱化

• 与 SCSS 相比功能略弱

• 未来趋势更偏向 SCSS / Tailwind

总结一句话

Tailwind 适合“快速搭建 + 高复用 UI”；
SCSS 适合“结构化样式体系”；
Less 适合“轻量或旧项目”。

本文部分内容借助 AI 辅助生成，并由作者整理审核。